<template>
	<view class="supplier_bg">
		<CommonHeader :title="$t('服务商认证')"></CommonHeader>
		<view class="supp_banner">
			<view class="item">
				<view class="name">
					GULZ
				</view>
				<view class="text">
					{{$t('跨越山海')}} {{$t('链接未来')}}
				</view>
			</view>
			<image class="img" src="/static/waib/img-fox.png" mode="widthFix"></image>
		</view>


		<view class="supplier">
			<view class="supplier_item">
				<view class="name">
					{{$t('身份')}}<text>*</text>
				</view>
				<view class="info">
					<view class="radios">
						<view class="radio" @click="paramsSubmit.is_company = 2">
							<image
									v-if="paramsSubmit.is_company == 2"
								src="/static/waib/radio-b.png"
							/>
							<image
								v-else
								src="/static/waib/radio-a.png"
							/>
							<text>{{$t('个人')}}</text>
						</view>
						<view class="radio" @click="paramsSubmit.is_company = 1">
							<image
								v-if="paramsSubmit.is_company == 1"
								src="/static/waib/radio-b.png"
							/>
							<image
								v-else
								src="/static/waib/radio-a.png"
							/>
							<text>{{$t('公司')}}</text>
						</view>
				
					</view>
				</view>
			</view>

			<view class="supplier_item">
				<view class="name">
					{{$t('上传用户头像')}}<text>*</text>
				</view>
				<view class="info_upload" @click="onUpload({ type: 'image', size: 5, count: 1 },'avatar')">
					<image v-for="(item, index) in avatarList" :key="index" :src="item.fullurl" mode="aspectFill" style="width: 94rpx;height: 94rpx;border-radius: 50%;"/>
					<image src="/static/waib/ico_1.png" mode="widthFix" style="width: 94rpx;height: 94rpx;"
						 v-if="avatarList.length < 1"></image>
				</view>
			</view>
			<view class="supplier_item">
				<view class="name">
					{{paramsSubmit.is_company == 1 ?  $t('公司名称') : $t('用户姓名')}}<text>*</text>
				</view>
				<view class="info">
					<uv-input :placeholder="$t('请输入')" border="none" fontSize="28rpx" inputAlign="right"
						placeholderStyle="color: #9BBCCD;" v-model="paramsSubmit.username"></uv-input>
				</view>
			</view>
			<!-- <view class="supplier_item">
				<view class="name">
					{{$t('公司地址')}}<text>*</text>
				</view>
				<view class="info">
					<uv-input :placeholder="$t('请输入')" border="none" fontSize="28rpx" inputAlign="right"
						placeholderStyle="color: #9BBCCD;" v-model="paramsSubmit.reg_address"></uv-input>
					<city @change="onCHangeHotArea" :value="fullBeginAddressKeyArea">
						<view class="inp">
							<view :class="{ txt: true, 'active': fullBeginAddressArea }">{{ fullBeginAddressArea || $t('请选择所在地') }}
							</view>
						</view>
					</city>
				</view>
			</view> -->
			<view class="supplier_item">
				<view class="name">
					{{$t('可承接的业务')}}
				</view>
				<view class="info">
					<uv-input :placeholder="$t('请输入')" border="none" fontSize="28rpx" inputAlign="right"
						placeholderStyle="color: #9BBCCD;" v-model="paramsSubmit.profile" maxlength="180"></uv-input>
				</view>
			</view>
			<!-- <view class="select_item">
				<view class="name">
					{{$t('采购范围（选填')}}）
				</view>
				<view class="info_select" @click="openSelect1">
					<view class="text">
						<template v-for="(item,index) in identity_category">
							{{ item.name }}{{ identity_category.length == index + 1 ? '' : ','}}
						</template>
						{{ identity_category.length == 0 ? $t('选择类目') : '' }}
					</view>
					<image class="ico_r" src="/static/waib/ico_r.png" mode="widthFix"></image>
				</view>
			</view> -->

			<view class="supplier_item2" @click="onUpload({ type: 'image', size: 5, count: 1 },'licence')" v-if="paramsSubmit.is_company == 1">
				<view class="name">
					{{$t('上传营业执照')}}
				</view>
				<view class="info_upload">
					
					<image v-for="(item, index) in imgList" :key="index" :src="item.fullurl" mode="aspectFill" style="width: 300rpx;height: 196rpx;"/>
					<image src="/static/waib/img_4.png" mode="widthFix" style="width: 300rpx;height: 196rpx;"  v-if="imgList.length < 1"></image>
					<view class="upload_text">
						{{$t('点击上传')}} <text>{{$t('营业执照')}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="btn_supp" @click="submit">
			<image src="/static/waib/btn_1.png" mode="widthFix"></image>
		</view>
		<view style="height: 80rpx"></view>

		<uv-popup ref="popupSelect1" mode="bottom" round="10" :closeable="true">
			<view class="select_list">
				<scroll-view scroll-y class="scroll-viewx">
					<view class="list">
						<view class="item" :class="item.select ? 'hover' : ''" v-for="(item, index) in classifyList"
							:key="index" @click="clickFirst(item)">
						{{ item.name }}
						</view>
					</view>
				</scroll-view>
				<uv-button text="确定" type="primary" size="large" @click="clickFirstOk"></uv-button>
			</view>
		</uv-popup>


	</view>
</template>

<script>
import CommonHeader from 'pages/translate/components/common-header.vue';
import { newProfile,getActionSheetList ,getUserHomepage} from '@/api/app.js';

import { uploadFile, chooseFile } from '@/utils/tool.js';

export default {
	components:{
		CommonHeader
	},
	data() {
		return {
			fileList2: [],
			listData1: [this.$t('一级类目'), this.$t('一级类目'), this.$t('一级类目'), this.$t('一级类目'), this.$t('一级类目'), this.$t('一级类目'), this.$t('一级类目'), this.$t('一级类目'), this.$t('一级类目'),],
			firstTypeIndex: 0,
			secondTypeIndex: [],
			avatarList: [], // 头像
			previewVideoUrl: '',
			imgList: [], // 营业执照
			videoList: [], // 视频
			// 参数提交
			paramsSubmit: {
        user_id: uni.getStorageSync('user_id'),
				is_company: 2, // 1是公司 2是个人
        avatar: '',
        username: '',
				profile: '', // 简介
				// identity_category_id: '', // 经营范围分类
				identity_id: '', 
        license_image: '', // 营业执照
      },
			identity_category: [],
			fullBeginAddressArea: '',
      fullBeginAddressKeyArea: '',
			classifyList: [],
			is_renzheng: 0,
		}
	},
	onLoad(options) {
		this.is_renzheng = options.is_renzheng
		this.paramsSubmit.identity_id = options.identity_id;
		// is_audit
		console.log(options.is_renzheng,'认证认证')
		this.getClassify();
	},
	methods: {
		clickFirst(item) {
			item.select = !item.select;
			this.$forceUpdate();
		},
		onCHangeHotArea(e) {
      this.fullBeginAddressKeyArea = e.column3.value;
      this.fullBeginAddressArea = e.column3.label;
      this.paramsSubmit.city_id = e.column3.value;
    },
		getClassify() {
			getActionSheetList({
        type: 'release_goods',
				pid: 0,
      }).then((res) => {
				this.classifyList = res.data.data
        // if (+this.is_renzheng) {
          this.getDetail();
        // }
      })
		},
		  // 数据回填
		getDetail() {
			uni.showLoading({
				title:'loading...',
			})
      getUserHomepage({
        user_id: uni.getStorageSync('user_id')
      }).then((res) => {
        let info = res.data.data.userInfo;
				// 分类回填
        // this.paramsSubmit.identity_category_id = info.identity_category_id || '';
				// if (info.identity_category_id) {
				// 	let arrId = info.identity_category_id.split(',')
				// 	let arr = [];
				// 	this.classifyList.forEach((ele,index)=> {
				// 		if (arrId.indexOf(String(ele.id)) > -1) {
				// 			ele.select = true;
				// 			arr.push(ele);
				// 		}
				// 	})
				// 	this.identity_category = arr;
				// }
				
				this.paramsSubmit.username = info.username;
				this.paramsSubmit.is_company = info.is_company || 2;
				this.paramsSubmit.profile = info.profile;
				
				// this.paramsSubmit.reg_address = info.reg_address;

				
				// this.fullBeginAddressArea = info.area_new_id || '';
				// this.fullBeginAddressKeyArea = info.city || '';
				// this.paramsSubmit.city_id = info.area_new_id;

      

  			// 头像
				if (info.avatar) {
					this.paramsSubmit.avatar = this.getImageUrl(info.avatar);
					this.avatarList = [{
						fullurl: this.getImageUrl(info.avatar),
						url: this.getImageUrl(info.avatar)
					}]
				}
      
				// 营业执照
				if (info.license_image) {
					this.paramsSubmit.license_image = this.getImageUrl(info.license_image);
					this.imgList = [{
						fullurl: this.getImageUrl(info.license_image),
						url: this.getImageUrl(info.license_image)
					}]
				}

				this.$forceUpdate();
				uni.hideLoading();


      
   

 

      })
    },


		clickFirstOk() {
			let ids = [];
			let arr = [];
			this.classifyList.forEach((ele)=> {
				if (ele.select) {
					ids.push(ele.id);
					arr.push(ele)
				}
			})
			this.paramsSubmit.identity_category_id = ids.join(',');
			this.identity_category = arr;

			this.$refs.popupSelect1.close();
		},
		openSelect1() {
			this.$refs.popupSelect1.open();
		},
		// 删除图片
		onDelete(index, arr) {
			this[arr].splice(index, 1)
		},
		// 上传视频和图片
		async onUpload({ type, size, count },keya) {
			let res = await uploadFile(await chooseFile({
				type,
				size,
				count,
			}))
			if (type == 'image') {
				if(keya == 'avatar') {
					this.avatarList = [res]
				}
				if(keya == 'licence') {
					this.imgList = [res]
				}
			}

		},
		onPreview(current) {
			uni.previewImage({
				current,
				urls: [current]
			})
		},
		async submit() {
			
      if (!this.avatarList.length) {
        uni.showToast({
          title: this.$t('请上传头像'),
          icon: 'none',
        })
        return;
      }

      if (!this.paramsSubmit.username) {
        uni.showToast({
          title: this.$t('请输入公司名称'),
          icon: 'none',
        })
        return;
      }
      if (!this.paramsSubmit.profile) {
        uni.showToast({
          title: this.$t('请输入可承接的业务'),
          icon: 'none',
        })
        return;
      }

      // if (!this.imgList.length) {
      //   uni.showToast({
      //     title: this.$t('请上传营业执照'),
      //     icon: 'none',
      //   })
      //   return;
      // }

    

			// 营业执照
      let arrImg = [];
      this.imgList.forEach((ele)=> {
        arrImg.push(ele.fullurl)
      })

					// 营业执照
			let avatarArr = [];
      this.avatarList.forEach((ele)=> {
        avatarArr.push(ele.fullurl)
      })

      let arrVideo = [];
      this.videoList.forEach((ele)=> {
        arrVideo.push(ele.fullurl)
      })

      uni.showLoading({ title: 'loading...', mask: true, })
      try {
        let res = await newProfile({
          ...this.paramsSubmit,
          license_image: arrImg.join(','),
					avatar: avatarArr.join(',')
        })
        if (res.data.code == 1) {
					this.isMessageGo({
						action: 'upDateUser',
						data: {
							name: this.paramsSubmit.username,
							avatar: this.getImageUrl(avatarArr.join(','))
						}
					})
          uni.showToast({
            title: this.$t('提交成功'),
          })
          setTimeout(() => {
            uni.hideLoading({})
            uni.navigateBack({})
          }, 700);
        } else {
					uni.showToast({
						title: res.data.msg || res.data.message,
						icon: 'none',
					})
          uni.hideLoading({})

        }

      } catch (error) {
        uni.hideLoading({})
      }



    }

	}
}
</script>


<style lang="scss" scoped>
.select_list {
	width: 100%;
	padding: 60rpx 30rpx;
	box-sizing: border-box;

	.scroll-viewx {
		max-height: 30vh;
		min-height: 20vh;
	}

	.list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
		padding-bottom: 40rpx;

		.item {
			font-size: 26rpx;
			line-height: 36rpx;
			padding: 15rpx 30rpx;
			background: #F7F7F7;
			border-radius: 8rpx;
			text-align: center;

			&.hover {
				background: rgba(16, 108, 255, 0.7);
				color: #fff;
			}
		}
	}
}

.info_select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #F7F7F7;
	height: 80rpx;
	border-radius: 15rpx;
	padding: 0 30rpx;
	margin-bottom: 16rpx;
	cursor: pointer;

	.text {
		color: #666;
		font-size: 28rpx;
	}

	.ico_r {
		flex-shrink: 0;
		width: 10rpx;
	}
}

.supplier_bg {
	background: url('/static/waib/bg_1.png') no-repeat center top;
	background-size: 100% auto;
}

.supplier {
	margin: 0 24rpx;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 20rpx rgba(154, 208, 255, 0.3);
	background: #fff;
	background-size: 100% auto;
	padding: 0 30rpx;

	.select_item {
		border-bottom: 1rpx solid #eee;
		padding-bottom: 15rpx;

		.name {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333;
			padding: 30rpx 0 20rpx;

			text {
				color: red;
			}
		}
	}

	.supplier_item2 {
		padding-bottom: 40rpx;

		.name {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333;
			padding: 30rpx 0 20rpx;

			text {
				color: red;
			}
		}

		.upload_text {
			width: 300rpx;
			text-align: center;
			font-size: 26rpx;
			line-height: 30rpx;
			margin-top: 30rpx;

			text {
				color: #2268C8;
			}
		}
	}

	.supplier_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 114rpx;
		border-bottom: 1rpx solid #eee;

		.name {
			flex-shrink: 0;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333;
			width: 240rpx;

			text {
				color: red;
			}
		}

		.info {
			width: 100%;
		}
	}
}

.supp_banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 40rpx 10rpx 50rpx;

	.item {
		.name {
			font-size: 58rpx;
			line-height: 50rpx;
			font-weight: bold;
			margin-top: 40rpx;

		}

		.text {
			font-size: 26rpx;
			line-height: 40rpx;
			margin-top: 15rpx;
			padding-bottom: 30rpx;
			color: #555;
		}
	}

	.img {
		flex-shrink: 0;
		width: 220rpx;
		height: auto;
	}
}

.btn_supp {
	padding: 40rpx 24rpx;
	cursor: pointer;

	image {
		width: 100%;
		height: auto;
	}
}

.info {
	.inp {
		display: flex;
		align-items: center;
		.aroow {
        width: 44rpx;
        height: 44rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .txt {
        flex: 1;
        color: #606366;
        font-size: 26rpx;
        font-weight: 400;
				text-align: right;
				color: rgb(155, 188, 205);
        &.active {
          color: #333;
        }
      }
	}
}


.radios {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	.radio {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
		&:last-child {
			margin-right: 0;
		}
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 16rpx;
		}
		text {
			color: #333;
			font-size: 28rpx;
			font-weight: 400;
		}
	}
}
</style>
